<template>
  <div class="tw-libchart" :style="{width: '100%',height: height, backgroundColor: bgColor}">
    <div style="display:flex">
      <div style="text-align:right;" :style="{color: labelColor, fontSize: labelFontSize,marginRight: marginRight}">
        <div style="white-space: nowrap;margin-top: 40px;">{{data.note}}</div>
        <div><span style="vertical-align: baseline;font-family:digiface" :style="{fontSize: labelDigiFontSize}">{{schoolSumNum}}</span><span>所</span></div>
      </div>
      <div style="" v-show="data.data.length>0"
        class="tw-datasetchart"
        ref="chart"
        :style="{height: height, backgroundColor: bgColor}">
      </div>
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-multring',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'pie',
      schoolSumNum: 0,
      newoption: {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let res = ''
            if (!params.value) {
              return ''
            }
            res += params.seriesName + '<br />' + params.name + ': ' + Math.round(params.value) + '所' + '(' + params.percent + '%)'
            return res
          }
        },
        legend: {
          show: this.showLegend,
          left: this.legendLeft === '' ? 'auto' : this.legendLeft,
          top: this.legendTop === '' ? 'auto' : this.legendTop,
          right: this.legendRight === '' ? 'auto' : this.legendRight,
          bottom: this.legendBottom === '' ? 'auto' : this.legendBottom,
          itemHeight: parseInt(this.legendHeight),
          itemWidth: parseInt(this.legendWidth),
          icon: this.icon,
          // top: '15%',
          // right: '10%',
          width: this.legendAllWidth,
          data: [],
          textStyle: {
            color: this.legendColor,
            fontSize: this.legendFontSize,
            // color: '#bad3ff',
            // fontSize: 18
          },
          // itemHeight: 6,
          // itemWidth: 20
        },
        series: []
      }
    }
  },

  computed: {
    option () {
      return {}
    }
  },

  methods: {
    init() {
      this.chart = window.echarts.init(this.$refs.chart)

      if (this.data.data.length > 0) {
        this.setSeries()
        this.setOption()
      }
    },
    setSeries () {
      let vm = this

      let colors = vm.colors
      this.series = []

      let circleCenter = vm.data.circleCenter

      let circleRadius = vm.data.circleRadius
      this.newoption.series = this.series
      this.newoption.legend.data = this.data.name
      this.schoolSumNum = 0
      this.data.data.forEach(item => {
        for (let i = 0; i < item.data.length; i++) {
          this.schoolSumNum += item.data[i]
        }
      })
      this.schoolSumNum = Math.round(this.schoolSumNum)

      vm.data.data.forEach((d1, d2) => {
        vm.series.push({
          name: d1.name,
          type: 'pie',
          startAngle: -90,
          radius: circleRadius[d2],
          center: circleCenter[d2],
          legendHoverLink: false,
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false
          },
          labelLine: {
            show: false,
            length: 30,
            length2: 0
          },
          data: []
        })
        let total = 0
        vm.series[d2].data.push({
          value: 0,
          itemStyle: {
            opacity: 0
          },
          label: {
            show: true,
            position: 'outside',
            padding: [0, 0, 0, parseInt(vm.label1Padding)],
            textStyle: {
              fontSize: vm.label1FontSize,
              color: vm.label1Color
            },
            formatter: () => {
              // return d1.name.substring(0, 6) + '\n' + 'fff'
              let index = 0
              if (d1.name.length > 6) {
                index = 6
              }
              let text = d1.name
              if (index === 6) {
                let text1 = text.substring(index, d1.name.length)
                if (text1.length === 2) {
                  text1 = '\n      ' + text1
                } else if (text1.length === 3) {
                  text1 = '\n    ' + text1
                } else {
                  text1 = '\n' + text1
                }
                text = text.substring(0, index) + text1
              }
              return text
            }
          }
        })
        d1.data.forEach((p1, p2) => {
          vm.series[d2].data.push({
            name: vm.data.name[p2],
            value: p1,
            itemStyle: {
              color: colors[p2]
            }
          })
          total += p1
        })
        vm.series[d2].data.push({
          value: 0,
          itemStyle: {
            opacity: 0
          },
          label: {
            show: true,
            position: 'center',
            textStyle: {
              fontSize: vm.label2FontSize,
              fontFamily: 'digiface',
              color: vm.label2Color
            },
            formatter: (params) => {
              return Math.round(total)
            }
          }
        })
      })
    },

    setOption () {
      let vm = this
      if (vm.data.data.length > 0 && vm.chart) {
        vm.chart.setOption(vm.newoption, true)
        if (vm.useLiandong) {
          vm.chart.off('legendselectchanged')
          vm.chart.on('legendselectchanged', vm.handleclick)
        }
        vm.resize()
      }
    },
    handleclick (params) {
      let vm = this
      let selected = params.selected

      let status = false
      let keys = []
      for (let key in selected) {
        if (selected[key]) {
          status = selected[key]
          keys.push(key)
        }
      }

      let values = []
      let schoolSumNum = 0
      vm.data.data.forEach(item => {
        let a = 0
        if (keys.length === 0) {
          a += item.data[0]
        }

        for (let n = 0; n < vm.data.name.length; n++) {
          if (keys.includes(vm.data.name[n])) {
            a += item.data[n]
          }
        }
        schoolSumNum += a
        values.push(a)
      })

      let series = vm.series
      vm.series.forEach((itm, idx) => {
        itm.data.pop()
        itm.data.push({
          value: 0,
          itemStyle: {
            opacity: 0
          },
          label: {
            show: true,
            position: 'center',
            textStyle: {
              fontSize: vm.label2FontSize,
              fontFamily: 'digiface',
              color: vm.label2Color
            },
            formatter: (params) => {
              return Math.round(values[idx])
            }
          }
        })
      })

      if (!status) {
        let k = vm.data.name[0]
        selected[k] = true
        vm.chart.setOption({ legend: { selected }, series: series })
      } else {
        vm.chart.setOption({ series: series })
      }
      vm.schoolSumNum = Math.round(schoolSumNum)
    }
  },

  watch: {
    legendLeft () {
      this.setSeries()
    },

    legendColor () {
      this.setSeries()
    },

    legendAllWidth () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
